<template>
  <div id="add-to-assess">
    <div class="search-box">
      <el-form>
        <el-form-item label="店铺名称：">
          <el-select
            :class="msgLight ? 'msgLight' : ''"
            v-model="searchForm.shopId"
            placeholder="请选择店铺"
            size="small"
            filterable
            :filter-method="dataFilter"
            clearable
          >
            <el-option
              v-for="(item, index) in shopNameList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务ID：">
          <el-input
            placeholder="请输入任务ID"
            v-model="searchForm.taskCode"
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="商品ID：">
          <el-input
            placeholder="请输入商品ID"
            v-model="searchForm.productId"
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="推手账号：">
          <el-input
            placeholder="请输入推手账号"
            v-model="searchForm.account"
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="付款金额：">
          <el-input
            placeholder="请输入付款金额"
            v-model="searchForm.payMoney"
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="订单号：">
          <el-input
            placeholder="请输入订单号"
            v-model="searchForm.orderNum"
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="状态 ：">
          <el-select
            v-model="searchForm.status"
            placeholder="请选择类型"
            size="small"
          >
            <el-option label="全部" value=""></el-option>
            <el-option
              v-for="(item, index) in evaluationStatus"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商家要求 ：">
          <el-select
            v-model="searchForm.selfType"
            placeholder="请选择类型"
            size="small"
          >
            <el-option
              v-for="(name, value, index) in assessTaskType"
              :key="index"
              :label="name"
              :value="value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邀请时间 ：">
          <el-date-picker
            size="small"
            v-model="completeTime"
            type="datetimerange"
            @change="changeCompleteTime"
            :default-time="['00:00:00', '23:59:59']"
            range-separator="至"
            start-placeholder="开始日期"
            :picker-options="pickerOptions"
            end-placeholder="结束日期"
            :style="msgLight2 ? 'border:1px solid red;' : ''"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            class="search-btn"
            icon="el-icon-ali-search"
            @click="searchData"
            >查&nbsp;询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            class="reset-btn"
            icon="el-icon-ali-reset"
            @click="resetSearchParam"
            >重&nbsp;置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="table-box">
      <div class="table-header-box">
        <div class="tips">{{ systemTips }}</div>
      </div>
      <el-table border :data="tableData" max-height="580px">
        <el-table-column prop="platform_type" label="店铺类型/店铺名称">
          <div slot-scope="scope">
            <div class="textColor">{{ getShopType(scope.row) }}</div>
            <div>{{ scope.row.shop_name }}</div>
          </div>
        </el-table-column>
        <el-table-column prop="assess_type" label="评价类型/商家要求">
          <div slot-scope="scope">
            <div class="textColor">{{ getAssessType(scope.row) }}</div>
            <div>{{ getSelfType(scope.row) }}</div>
          </div>
        </el-table-column>
        <el-table-column prop="status_name" label="状态"></el-table-column>
        <el-table-column prop="remark" label="终止原因"></el-table-column>
        <el-table-column prop="assess_code" label="评价ID/任务ID">
          <div slot-scope="scope">
            <div>{{ scope.row.assess_code }}</div>
            <div>{{ scope.row.task_code }}</div>
          </div>
        </el-table-column>
        <el-table-column width="120px" prop="goods_img" label="商品主图">
          <el-popover
            placement="right"
            trigger="hover"
            slot-scope="scope"
            v-if="scope.row.goods_img"
          >
            <img class="goods-preview-img" :src="scope.row.goods_img" />
            <img
              slot="reference"
              :src="scope.row.goods_img"
              style="width: 80px;height: 80px"
            />
          </el-popover>
        </el-table-column>
        <el-table-column prop="product_id" label="商品ID"></el-table-column>
        <el-table-column prop="commission" label="推手账号/佣金">
          <div slot-scope="scope">
            <div class="textColor">{{ scope.row.tb_name }}</div>
            <div style="color: #ee7b5a;">{{ scope.row.commission }}</div>
          </div>
        </el-table-column>
        <el-table-column prop="over_time" label="完成时间/邀请时间">
          <div slot-scope="scope">
            <div>{{ scope.row.over_time }}</div>
            <div>{{ scope.row.invite_time }}</div>
          </div>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          width="130"
          class-name="shenghe"
        >
          <template slot-scope="scope">
            <div class="success-list-btn">
              <el-button
                class="stop-btn"
                v-if="scope.row.invite_status == 1 && scope.row.status == 4"
                size="mini"
                @click="againAssess(scope.row)"
                >追加评价</el-button
              >
              <el-button
                class="look-btn"
                size="mini"
                @click="getAssessDetail(scope.row, 2)"
                >查看</el-button
              >
              <el-button
                class="look-btn"
                v-if="scope.row.status == 3"
                size="mini"
                @click="getAssessDetail(scope.row, 1)"
                >待审核</el-button
              >
              <el-button
                v-if="scope.row.status == 1 || scope.row.status == 2"
                class="stop-btn"
                size="mini"
                @click="stopTask(scope.row)"
                >终止</el-button
              >
              <el-button
                class="appeal-btn"
                v-if="scope.row.appeal_status == 4"
                size="mini"
                @click="openAppealOrder(scope.row)"
                >申诉</el-button
              >
              <div v-else>{{ appealStatus[scope.row.appeal_status] }}</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="allTableData" id="exportTable" border v-show="false">
        <el-table-column
          prop="platform_type"
          label="店铺类型"
          :formatter="getShopType"
        ></el-table-column>
        <el-table-column
          prop="assess_type"
          label="评价类型"
          :formatter="getAssessType"
        ></el-table-column>
        <el-table-column
          prop="self_type"
          label="商家要求"
          :formatter="getSelfType"
        ></el-table-column>
        <el-table-column
          prop="assess_code"
          label="邀请评价ID"
        ></el-table-column>
        <el-table-column prop="commission" label="佣金"></el-table-column>
        <el-table-column prop="shop_name" label="店铺名称"></el-table-column>
        <el-table-column prop="product_id" label="商品ID"></el-table-column>
        <el-table-column
          prop="entrance_type"
          label="入口类型"
          :formatter="getEntranceType"
        ></el-table-column>
        <el-table-column prop="keyword" label="关键词"></el-table-column>
        <el-table-column prop="tb_name" label="推手账号"></el-table-column>
        <el-table-column prop="over_time" label="完成时间"></el-table-column>
        <el-table-column prop="invite_time" label="邀请时间"></el-table-column>
        <el-table-column prop="task_code" label="任务ID"></el-table-column>
        <el-table-column prop="status_name" label="状态"></el-table-column>
        <el-table-column prop="remark" label="终止原因"></el-table-column>
      </el-table>
      <div class="table-footer">
        <el-popover
          placement="top-start"
          title="导出功能说明"
          width="200"
          trigger="hover"
        >
          <div>
            支持导出的数据：<br> <el-tag type='success'>审核成功</el-tag> 或 <el-tag  type='warning'>审核失败</el-tag> <br>
            操作成功后会自动上锁60秒 <br>
            倒计时结束后，自动解锁
          </div>
          <el-button
            slot="reference"
            :icon="lock ? 'el-icon-download' : 'el-icon-ali-password'"
            class="download-btn"
            :style="lock ? '' : 'background:#ccc'"
            @click="exportAssessTaskDone"
            >{{ lock ? "导出" : dtime + " S" }}</el-button
          >
        </el-popover>
        <!-- <el-button
          icon="el-icon-download"
          class="download-btn"
          @click="downloadExcel"
          >导出</el-button
        > -->
        <el-pagination
          :page-sizes="[5, 10, 15, 20]"
          :page-size="searchForm.pageSize"
          :current-page="searchForm.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageToatal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
    <v-appeal
      :appealForm="appealForm"
      @closeDialog="closeAppealDialog"
      @confrimAppeal="confrimAppeal"
      v-if="showAppealDialog"
    ></v-appeal>
    <v-assess
      :assessForm="assessForm"
      :createType="2"
      @closeDialog="closeAssessDialog"
      @confrimAssess="confrimAssess"
      v-if="showAssessDialog"
    ></v-assess>
    <el-dialog
      :title="isCheck ? '审核' : '查看'"
      :visible.sync="isShowCheckAssessDisplay"
      width="800px"
      class="dialog-style check-assess-dialog"
    >
      <div class="dialog-body">
        <div class="dialog-cell">
          <div class="dialog-cell-title">推手账号：</div>
          <div class="dialog-cell-content">{{ detail.tb_name }}</div>
        </div>
        <div class="dialog-cell">
          <div class="dialog-cell-title">评价类型：</div>
          <div class="dialog-cell-content">
            {{ assessTaskType[detail.selfType] }}
          </div>
        </div>
        <div class="dialog-cell">
          <div class="dialog-cell-title">评语：</div>
          <div class="dialog-cell-content">{{ detail.assess_content }}</div>
        </div>
        <div
          class="dialog-cell"
          v-if="detail.selfType == 2 && detail.imgUrlArr.length > 0"
        >
          <div class="dialog-cell-title">图片：</div>
          <div class="dialog-cell-content">
            <img
              class="show-img"
              :src="item"
              alt=""
              v-for="(item, index) in detail.imgUrlArr"
              :key="index"
            />
          </div>
        </div>
        <div
          class="dialog-cell"
          v-if="detail.selfType == 2 && detail.video_url"
        >
          <div class="dialog-cell-title">视频：</div>
          <div class="dialog-cell-content">
            <video class="video" :src="detail.video_url"></video>
          </div>
        </div>
        <div class="dialog-cell" v-if="detail.push_img_url">
          <div class="dialog-cell-title">上传截图：</div>
          <div
            class="dialog-cell-content"
            @mouseenter="displayLargeImage"
            @mouseleave="hideLargeImage"
          >
            <img
              class="cover-preview__small"
              style="height: 150px;width: 120px;"
              v-if="detail.push_img_url"
              :src="detail.push_img_url"
            />
            <img class="cover-preview__large" :src="detail.push_img_url" />
          </div>
        </div>
        <div class="dialog-cell" v-if="isCheck">
          <div class="dialog-cell-title">审核操作：</div>
          <div class="dialog-cell-content">
            <el-radio-group class="radio-box" v-model="checkAssessForm.status">
              <el-radio :label="1">成功</el-radio>
              <el-radio :label="2">失败</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="dialog-cell" v-if="checkAssessForm.status == 2">
          <div class="dialog-cell-title">失败原因：</div>
          <div class="dialog-cell-content">
            <el-input
              type="textarea"
              rows="5"
              v-model="checkAssessForm.remark"
              placeholder="失败原因"
            ></el-input>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" v-if="isCheck">
        <el-button class="cancel-btn" @click="isShowShopAutoDialog = false"
          >取消</el-button
        >
        <el-button
          class="submit-btn"
          :loading="submitOptLoading"
          :disabled="submitOptLoading"
          @click="checkAssessTask"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  apiGetMerchantShopList,
  apiAssessTaskOver,
  apiCheckAssessTask,
  apiAssessTaskList,
  apiAssessDetail,
  apiExportAssessTaskDone,
  apiExportAssessTaskDownLoad
} from "../../request/api.js";
import { mapGetters, mapActions } from "vuex";
import vAppeal from "../../components/createAppeal.vue";
import vAssess from "../../components/createAssess.vue";
export default {
  components: {
    vAppeal,
    vAssess
  },
  data() {
    return {
      msgLight: false,
      msgLight2: false,
      lock: true,
      dtime: 60,
      timer: null,
      searchForm: {
        token: "",
        page: 1,
        pageSize: 10,
        shopId: "",
        productId: "",
        taskCode: "",
        status: "",
        keyword: "",
        startTime: "",
        endTime: "",
        account: "",
        selfType: "",
        shopType: ""
      },
      evaluationStatus: [
        {
          label: "已邀请",
          value: 1
        },
        {
          label: "正在执行",
          value: 2
        },
        {
          label: "待审核",
          value: 3
        },
        {
          label: "审核成功",
          value: 4
        },
        {
          label: "审核失败",
          value: 5
        },
        {
          label: "商家中止",
          value: 6
        },
        {
          label: "人工终止",
          value: 7
        },
        {
          label: "超时终止",
          value: 8
        }
      ],
      assessForm: {
        token: "",
        assessContent: "",
        imgUrls: "",
        videoUrl: "",
        id: "",
        pushId: "",
        platformType: "",
        assessType: "",
        selfType: 2
      },
      detail: {
        tb_name: "",
        video_url: "",
        imgUrlArr: [],
        assess_content: "",
        push_img_url: "",
        selfType: 2
      },
      isShowCheckAssessDisplay: false,
      checkAssessForm: {
        token: "",
        id: "",
        remark: "",
        status: 1
      },
      completeTime: [],
      shopNameList: [],
      shopNameOptions: [],
      platformNameObject: {
        1: "淘宝",
        2: "天猫",
        3: "京东",
        4: "1688",
        13: "唯品会",
        15: "拼多多"
      },
      entranceType: {
        1: "关键词",
        2: "淘口令",
        3: "二维码",
        4: "直播",
        5: "其他"
      },
      pageToatal: 0,
      tableData: [],
      pickerOptions: {
        disabledDate(time) {
          let merchantTime = window.localStorage.getItem("merchantTime");
          let curDate = new Date().getTime();
          let three = merchantTime * 24 * 3600 * 1000;
          let threeMonths = curDate - three;
          return time.getTime() < threeMonths;
        }
      },
      assessType: {
        1: "首评",
        2: "追加"
      },
      appealForm: {},
      appealStatus: {
        1: "申诉已提交",
        2: "申诉正在处理",
        3: "申诉已完成"
      },
      assessTaskType: {
        1: "自评类型",
        2: "商家要求"
      },
      assessSelfType: [
        {
          label: "全部",
          value: ""
        },
        {
          label: "自评",
          value: 1
        },
        {
          label: "商家要求",
          value: 2
        }
      ],
      showAppealDialog: false,
      allTableData: [],
      searchResult: "",
      platformTypeList: [
        {
          label: "淘宝",
          value: 1
        },
        {
          label: "天猫",
          value: 2
        },
        {
          label: "京东",
          value: 3
        },
        {
          label: "1688",
          value: 4
        },
        {
          label: "唯品会",
          value: 13
        },
        {
          label: "拼多多",
          value: 15
        }
      ],
      shopCheckList: [],
      otherShopType: [3, 13],
      showAssessDialog: false,
      isCheck: false,
      systemTips: "",
      userToken: window.localStorage.getItem("token")
    };
  },
  created() {
    this.searchForm.token = this.userToken;
    this.searchForm.shopType = this.platformType;
    // this.getCurTime()
    this.getShopList();
    this.getTableData();
  },
  computed: {
    ...mapGetters(["platformType"])
  },
  watch: {
    platformType: function(val) {
      this.searchForm.shopType = val;
      this.getTableData();
    },
    "searchForm.shopId": function() {
      this.$message("记得点击查询获取最新数据哦");
    },
    dtime() {
      if (this.dtime == 0) {
        this.lock = true;
        clearInterval(this.timer);
        this.dtime = 60;
      }
    }
  },
  methods: {
    dataFilter(val) {
      this.searchForm.shopId = val;
      if (val) {
        //val存在
        this.shopNameList = this.shopNameOptions.filter(item => {
          if (
            !!~item.name.indexOf(val) ||
            !!~item.name.toUpperCase().indexOf(val.toUpperCase())
          ) {
            return true;
          }
        });
      } else {
        //val为空时，还原数组
        this.shopNameList = this.shopNameOptions;
      }
    },
    getShopList() {
      this.$isClick(true);
      apiGetMerchantShopList({
        token: this.userToken
      })
        .then(res => {
          this.$isClick(false);
          if (res.code == 1) {
            for (var i in res.msg.merchant_shop_list) {
              this.shopNameOptions.push({
                name:
                  this.platformNameObject[res.msg.merchant_shop_list[i].type] +
                  "-" +
                  res.msg.merchant_shop_list[i].name,
                id: res.msg.merchant_shop_list[i].id
              });
            }
            this.shopNameList = this.shopNameOptions;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(res => {
          this.$isClick(false);
          this.$message.error(res.msg);
        });
    },
    getTableData() {
      this.$isClick(true);
      apiAssessTaskList(this.searchForm)
        .then(res => {
          this.$isClick(false);
          if (res.code == 1) {
            this.tableData = res.msg.res;
            this.pageToatal = res.msg.allNum;
            this.systemTips = res.msg.tip;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(res => {
          this.$isClick(false);
          this.$message.error(res.msg);
        });
    },
    getAssessDetail(row, type) {
      this.$isClick(true);
      apiAssessDetail({
        token: this.userToken,
        id: row.id
      })
        .then(res => {
          this.$isClick(false);
          if (res.code == 1) {
            this.isShowCheckAssessDisplay = true;
            this.checkAssessForm.status = 1;
            this.checkAssessForm.remark = "";
            this.isCheck = type == 1 ? true : false;
            this.checkAssessForm.id = row.id;
            this.detail = {
              tb_name: res.msg.tb_name,
              video_url: res.msg.video_url,
              imgUrlArr: res.msg.img_urls ? res.msg.img_urls.split(",") : [],
              assess_content: res.msg.assess_content,
              push_img_url: res.msg.push_img_url,
              selfType: res.msg.self_type
            };
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(res => {
          this.$isClick(false);
          this.$message.error(res.msg);
        });
    },
    openAppealOrder(row) {
      console.log(row);
      this.appealForm = {
        token: this.userToken,
        task_type: 3,
        type: 1,
        order_num: row.order_num ? row.order_num : "",
        tb_name: row.tb_name,
        task_code: row.assess_code,
        content: "",
        treat_content: "",
        proof_img_url: "",
        appeal_why: "",
        push_id:row.push_id
      };
      this.showAppealDialog = true;
    },
    closeAppealDialog() {
      this.showAppealDialog = false;
    },
    confrimAppeal() {
      this.$message.success("申诉成功，请在申诉工单处查看");
      this.getTableData();
      this.showAppealDialog = false;
    },
    againAssess(row) {
      this.assessForm = {
        token: this.userToken,
        assessContent: "",
        imgUrls: "",
        videoUrl: "",
        pushId: row.push_id,
        platformType: row.shop_type,
        id: row.task_id,
        assessType: 2,
        selfType: 2
      };
      this.showAssessDialog = true;
    },
    closeAssessDialog() {
      this.showAssessDialog = false;
    },
    confrimAssess() {
      this.$message.success("邀请成功");
      this.getTableData();
      this.showAssessDialog = false;
    },
    checkAssessTask() {
      this.submitOptLoading = true;
      this.checkAssessForm.token = this.userToken;
      apiCheckAssessTask(this.checkAssessForm)
        .then(res => {
          this.submitOptLoading = false;
          if (res.code == 1) {
            this.$message.success("操作成功");
            this.isShowCheckAssessDisplay = false;
            this.getTableData();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(res => {
          this.submitOptLoading = false;
          this.$message.error(res.msg);
        });
    },
    stopTask(row) {
      this.$isClick(true);
      apiAssessTaskOver({
        token: this.userToken,
        id: row.id
      })
        .then(res => {
          this.$isClick(false);
          if (res.code == 1) {
            this.getTableData();
            this.$message.success("操作成功");
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(res => {
          this.$isClick(false);
          this.$message.error(res.msg);
        });
    },
    getSelfType(row) {
      return this.assessTaskType[row.self_type];
    },
    getAssessType(row) {
      return this.assessType[row.assess_type];
    },
    getEntranceType(row) {
      return this.entranceType[row.entrance_type];
    },
    getShopType(row) {
      return this.platformNameObject[row.platform_type];
    },
    searchData() {
      this.searchForm.page = 1;
      this.searchForm.pageSize = 10;
      this.getTableData();
    },
    resetSearchParam() {
      this.searchForm = {
        token: this.userToken,
        page: 1,
        pageSize: 10,
        shopId: "",
        productId: "",
        taskCode: "",
        status: "",
        keyword: "",
        startTime: "",
        endTime: "",
        account: "",
        selfType: "",
        shopType: this.platformType
      };
    },
    getCurTime() {
      var now = new Date();
      var startTime =
        new Date(new Date().toLocaleDateString()).getTime() -
        24 * 60 * 60 * 1000 * 6;
      var endTime =
        new Date(new Date().toLocaleDateString()).getTime() +
        24 * 60 * 60 * 1000 -
        1;
      this.completeTime = [startTime, endTime];
      this.searchForm.startTime = Math.floor(startTime / 1000);
      this.searchForm.endTime = Math.floor(endTime / 1000);
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.getTableData();
    },
    changeCompleteTime(val) {
      if (this.completeTime == null) {
        this.searchForm.startTime = "";
        this.searchForm.endTime = "";
      } else {
        this.dataDiff(val[0], val[1], "success");
        this.searchForm.startTime = this.changeTimeType(val[0]);
        this.searchForm.endTime = this.changeTimeType(val[1]);
      }
    },
    dataDiff(startTime, endTime, type) {
      let diff = endTime - startTime;
      let t = 31 * 24 * 60 * 60 * 1000;
      if (diff > t) {
        this.$message.error("时间范围不能超过31天");
        if (type == "success") {
          this.completeTime = [];
        } else {
          this.checkTime = [];
        }

        return false;
      }
    },
    changeTimeType(time) {
      var d = new Date(time);
      var s =
        d.getFullYear() +
        "-" +
        (d.getMonth() + 1) +
        "-" +
        d.getDate() +
        " " +
        d.getHours() +
        ":" +
        d.getMinutes() +
        ":" +
        d.getSeconds();
      return new Date(s).getTime() / 1000;
    },
    toPlanDetailPage(id) {
      this.$router.push("/plan/salesPlanDetail?id=" + id);
    },
    closeAppealDialog() {
      this.showAppealDialog = false;
    },
    confrimAppeal() {
      this.$message.success("申诉成功，请在申诉工单处查看");
      this.getTableData();
      this.showAppealDialog = false;
    },
    hideLargeImage(e) {
      e.target.children[1].style.display = "none";
    },
    displayLargeImage(e) {
      const parentPosition = e.target.getBoundingClientRect();
      const target = e.target.children[1];
      target.style.display = "block";
      const targetPosition = target.getBoundingClientRect();
      target.style.left = `${parentPosition.left - targetPosition.width}px`;
      target.style.top = `${parentPosition.top - targetPosition.height / 2}px`;
    },
    getAllTableData() {
      let data = JSON.parse(JSON.stringify(this.searchForm));
      data.page = 1;
      data.pageSize = this.pageToatal;
      if (data.pageSize == 0) {
        this.$message.error("当前表格没有数据可以导出");
        return;
      }
      this.msgLight = false;
      this.msgLight2 = false;
      // 如果选择了店铺名，并且数据量超过500，提示请缩短任务完成时间
      if (data.pageSize > 500 && data.shopId) {
        this.msgLight2 = true;
        this.$message.error(
          `当前数据:${data.pageSize}（条）,导出限制500条，请缩短邀请时间`
        );
        return;
      }
      // 如果没选择店铺名，并且数据量超过500，提示选择店铺名
      else if (data.pageSize > 500 && !data.shopId) {
        this.$message(`请选择店铺`);
        this.msgLight = true;
        return;
      }
      this.$message(`正在导出，请耐心等待...`);
      return new Promise(resolve => {
        this.$isClick(true);
        apiAssessTaskList(data)
          .then(res => {
            this.$isClick(false);
            if (res.code == 1) {
              this.allTableData = res.msg.res;
              resolve(res);
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch(res => {
            this.$isClick(false);
            this.$message.error(res.msg);
          });
      });
    },
    downloadExcel() {
      var wb = "";
      var xlsxParam = { raw: true };
      this.getAllTableData().then(() => {
        this.$loading.show("下载中");
        wb = this.XLSX.utils.table_to_book(
          document.querySelector("#exportTable"),
          xlsxParam
        );
        var wbout = this.XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          this.FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            "销量已完成订单.xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        setTimeout(() => {
          this.$loading.hide();
          this.$message.success("下载完成");
        }, 1000);
        return wbout;
      });
    },
    exportAssessTaskDone() {
      if(this.searchForm.status != 4 && this.searchForm.status != 5){
        this.$message.error("只支持导出 审核成功 或 审核失败 的数据");
        setTimeout(()=>{this.$message.warning("请修改搜索条件，提示：选择状态")},200)
        return false;
      }
      if (!this.lock) {
        return false;
      }
      this.lock = false;
      this.timer = setInterval(() => {
        this.dtime--;
      }, 1000);
      let respSplit = "";
      apiExportAssessTaskDone({
        token: this.userToken,
        getSplit: "",
        shopId: this.searchForm.shopId || null,
        shopType: this.searchForm.shopType || null,
        startTime: this.searchForm.startTime || null,
        endTime: this.searchForm.endTime || null,
        selfType: this.searchForm.selfType || null,
        status: this.searchForm.status || null,
        endTime: this.searchForm.endTime || null
      }).then(res => {
        let obj = eval(res);
        if (obj.code != 200) {
          this.$message.error(obj.msg);
          return false;
        }
        respSplit = obj.data;
        if (obj.total == 0) {
          this.$message("没有可以导出的数据，请更换搜索条件或稍后重试");
          return false;
        }
        // this.$message("总数:" + obj.total + "|切成" + obj.split + "分");
        if(this.pageToatal!=obj.total){
          this.getTableData();
        }
        this.$confirm(
          "当前导出数据总数: " +
            obj.total +
            (obj.split > 1
              ? " ，为了加快导出速度，已智能分成 " +
                obj.split +
                " 个文件，确定导出吗？"
              : ""),
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "info"
          }
        )
          .then(() => {
            let time = 0;
            let _this = this;
            this.$message.success("数据正在导出，请耐心等待");
            respSplit.forEach((element,index) => {
              setTimeout(function(){
                _this.getData(
                  element,
                  "商户已完成订单第" + element.page + "页",
                  obj.split
                );
                _this.$message("商户已完成订单第" + element.page + "页 准备中");
              },(index+1)%2==0?time+=5000:time)
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
            this.lock = true;
            this.dtime = 60;
            clearInterval(this.timer);
            return;
          });
      });
    },

    async getData(v, name, split) {
      this.$isClick(true);
      apiExportAssessTaskDownLoad({
        token: this.userToken,
        getData: "",
        endTime: v.endTime,
        page: v.page,
        pageSize: v.pageSize,
        shopId: v.shopId,
        startTime: v.startTime,
        selfType: v.selfType,
        status: v.status
      }).then(res => {
        this.$isClick(false);
        // this.$message(`当前下载进度${v.page}/${split}`)
        let blob = new Blob([res]);
        let a = document.createElement("a");
        a.download = name + ".csv";
        a.href = window.URL.createObjectURL(blob);
        a.click();
        this.$message.success("商户已完成订单第" + v.page + "页 已完成");
      });
    }
  }
};
</script>

<style lang="less">
#add-to-assess {
  .table-header-box {
    .tips {
      color: red;
      text-align: right;
      margin: 10px 0;
    }
  }
  .success-list-btn {
    .look-btn {
      background: #f16f6f;
      color: #fff;
      padding: 8px 15px !important;
      margin-bottom: 5px;
      margin-left: 0 !important;
    }
    .stop-btn {
      background: @themeColor;
      color: #fff;
      padding: 8px 15px !important;
      margin-bottom: 5px;
      margin-left: 0 !important;
    }
    .appeal-btn {
      background: red;
      color: #fff;
      padding: 8px 15px !important;
      margin-left: 0 !important;
    }
  }
  .check-assess-dialog {
    .dialog-body {
      .dialog-cell {
        display: flex;
        margin-bottom: 16px;
        .dialog-cell-title {
          width: 100px;
          text-align: right;
        }
        .dialog-cell-content {
          flex: 1;
          img {
            width: 120px;
            height: 150px;
            border: 1px dashed #e0e0e0;
            margin-right: 10px;
          }
          .video {
            width: 120px;
            height: 150px;
            border: 1px dashed #e0e0e0;
          }
          position: relative;
          .cover-preview__small {
            display: flex;
            width: 80%;
          }
          .cover-preview__large {
            display: none;
            position: fixed;
            box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.08);
            left: 0;
            top: -100%;
            width: 300px;
            height: 80%;
            z-index: 9;
          }
        }
      }
    }
  }
}
.el-popover {
  .goods-preview-img,
  .keyword-preview-img {
    width: 200px;
    height: 200px;
  }
}
.msgLight input {
  border: red solid 1px;
}
</style>
